import React from 'react';
import { withRouter } from 'react-router';
import { connect } from 'react-redux';
import Pagination from 'rc-pagination';
import Dialog from 'rc-dialog';
import testResultAction from '../../actions/testResultAction.js';
import Widget from '../mui/Widget.js';
import SearchInput from '../mui/searchInput.js';

const TestResult = withRouter(
  React.createClass({
    getInitialState() {
      return {
        resultDialogPage: false,
        testCategoryName: '',
        testPushName: '',
        buttonState: false,
        resultId: '',
        resultState: -1,
        formData:{
          name:'',
          remark: '',
          id: ''
        }
      };
    },
    componentDidMount() {
      const data = {
        keyword: '',
        page: 1,
        page_size: 15
      };
      const { fetchTestResultList } = this.props;
      fetchTestResultList(data);
    },
    updateOne(item) {
      const { updateOneTestResult } = this.props;
      updateOneTestResult({ push_id: item._id });
    },
    updateDetail() {
      const { updateOneTestResult, fetchResultDetail } = this.props;
      const { resultId } = this.state;
      updateOneTestResult({ push_id: resultId });
      const data = {
        push_id: resultId,
        status: -1,
        page: 1,
        page_size: 30
      };
      fetchResultDetail(data);
    },
    showResultDialog(item) {
      this.setState(
        {
          resultDialogPage: true,
          testCategoryName: item.class_name,
          testPushName: item.name,
          resultId: item._id
        }
      );
      const { updateOneTestResult, fetchResultDetail } = this.props;
      updateOneTestResult({ push_id: item._id });
      const data = {
        push_id: item._id,
        status: -1,
        page:1,
        page_size:30
      };
      fetchResultDetail(data);
    },
    allList(item) {
      // $('.btn-tabs').each((index, Element) => {
      //   $(Element)
      //     .removeClass('btn-primary')
      //     .addClass('btn-cancel')
      // });
      // $(item.target)
      //   .removeClass('btn-cancel')
      //   .addClass('btn-primary');
      this.setState({ resultState: -1 });
      const data = {
        push_id: this.state.resultId,
        status: -1,
        page:1,
        page_size:30
      };
      const { fetchResultDetail } = this.props;
      fetchResultDetail(data);
    },
    successList(item) {
      // $('.btn-tabs').each((index, Element) => {
      //   $(Element)
      //     .removeClass('btn-primary')
      //     .addClass('btn-cancel')
      // });
      // $(item.target)
      //   .removeClass('btn-cancel')
      //   .addClass('btn-primary');
      this.setState({ resultState: 1 });
      const data = {
        push_id: this.state.resultId,
        status: 1,
        page:1,
        page_size:30
      };

      const { fetchResultDetail } = this.props;
      fetchResultDetail(data);
    },
    failList(item) {
      // $('.btn-tabs').each((index, Element) => {
      //   $(Element)
      //     .removeClass('btn-primary')
      //     .addClass('btn-cancel')
      // });
      // $(item.target)
      //   .removeClass('btn-cancel')
      //   .addClass('btn-primary');
      this.setState({ resultState: 0 });
      const data = {
        push_id: this.state.resultId,
        status: 0,
        page:1,
        page_size:30
      };

      const { fetchResultDetail } = this.props;
      fetchResultDetail(data);
    },
    detailListPaging(pageNumber) {
      const data = {
        push_id: this.state.resultId,
        status: this.state.resultState,
        page: pageNumber,
        page_size:30
      };

      const { fetchResultDetail } = this.props;
      fetchResultDetail(data);
    },
    search(target) {
      this.searchValue = target.value;
      const data = {
        keyword: target.value,
        page_size: 15
      };
      const { fetchTestResultList } = this.props;
      fetchTestResultList(data);
    },
    closeResult() {
      this.setState({ resultDialogPage: false });
    },
    pagination(pageNumber) {
      const data = {
        page: pageNumber,
        keyword: this.searchValue,
        page_size: 15
      };
      const { fetchTestResultList } = this.props;
      fetchTestResultList(data);
    },
    render() {
      let pushLogPageDialog;
      const { ResultData, ResultList, DetailData, oneDetailInfo } = this.props;
      const { resultState } = this.state;
      const exportUrl = `classpush/res/list/down?push_id=${this.state.resultId}&status=${this.state.resultState}`;
      // 推送记录弹出框
      // ===============
      if (this.state.resultDialogPage) {
        pushLogPageDialog = (
          <Dialog
            prefixCls={'test-result-dialog'} visible={this.state.resultDialogPage} animation="slide-fade" maskAnimation="fade"
            onClose={this.cancelResultDialog}
            style={{ width: 480 }}
            // bodyStyle={{ height: 390 }}
            // title={<div>第二个弹框</div>}
            // footer={
            // [<button type="button" className="btn btn-cancel w120" key="save" onClick={this.cancelResultDialog} >
            //     导出
            // </button>,
            // ]
            // }
          >
            <div className="test-result-body">
              <Widget widgetName={this.state.testPushName} widgetNameWidgth={'w350'} widgetTwoName={this.state.testCategoryName} closeLogo={this.closeResult} />
              <div className="title-message">
                <p>至{oneDetailInfo.data.now}，共{oneDetailInfo.data.devices}台子设备，其中{oneDetailInfo.data.success}台成功，{oneDetailInfo.data.fail}台失败</p>
                <button className="btn btn-primary" onClick={this.updateDetail} > 刷新 </button>
                <div className="clearfix"></div>
              </div>
              <div className="search-tabs">
                <button className={resultState === -1 ? 'btn btn-primary btn-tabs' : 'btn btn-cancel btn-tabs'} onClick={this.allList} >
                默认
                </button>
                <button className={resultState === 1 ? 'btn btn-primary btn-tabs' : 'btn btn-cancel btn-tabs'} onClick={this.successList} >
                成功
                </button>
                <button className={resultState === 0 ? 'btn btn-primary btn-tabs' : 'btn btn-cancel btn-tabs'} onClick={this.failList} >
                失败
                </button>
              </div>
              <div className="content-table">
                <table className="table table-hover">
                  <thead>
                    <tr>
                      <th className="w170">结果</th>
                      <th>SN号</th>
                      <th>原因</th>
                    </tr>
                  </thead>
                  <tbody>
                  {
                    DetailData.data && DetailData.data.map((item, index) =>
                      <tr key={index}>
                        <td className={item.cn === '成功' ? 'color-green' : 'color-red'}>{item.cn}</td>
                        <td>{item.sn_id}</td>
                        <td>{item.remark}</td>
                      </tr>
                    )
                  }
                  </tbody>
                </table>
              </div>
              <div className="test-result-page">
                <Pagination
                  className="ant-pagination"
                  defaultCurrent={1}
                  current={DetailData.page}
                  total={DetailData.pages && DetailData.pages * 10}
                  onChange={this.detailListPaging}
                />
              </div>
              <a className="btn btn-green w120 pull-right" href={exportUrl} >
                导出
              </a>
              <div className="clearfix"></div>
            </div>
          </Dialog>
        );
      }
      return (
        <div>
          <Widget widgetHeader={'测试类列表'} widgetHeaderTwo={'测试类推送结果'} />
          <div className="widget-body">
            <div className="mw400">
              <div className="pull-right">
                <SearchInput placeholder={"推送命名、类名称"} onSearch={this.search} />
              </div>
              <div className="clearfix"></div>
            </div>
            <table className="table table-hover">
              <thead>
                <tr>
                  <th className="mw230">推送时间</th>
                  <th className="mw230">推送命名</th>
                  <th className="mw230">类名称</th>
                  <th className="mw230">测试类推送结果列表</th>
                  <th className="mw290">测试类推送结果<span className="font-14">（总量:成功值：失败值）</span></th>
                  <th className="mw90">操作</th>
                </tr>
              </thead>
              <tbody>
              {
                ResultList && ResultList.map((item, index) =>
                  <tr key={index}>
                    <td>{item.created}</td>
                    <td>{item.name}</td>
                    <td>{item.class_name}</td>
                    <td><a onClick={this.showResultDialog.bind(this, item)}>查看详情</a></td>
                    <td>总:{item.devices} 成功:{item.success} 失败:{item.fail}</td>
                    <td><a className="disabel-a" onClick={this.updateOne.bind(this, item)}>刷新</a></td>
                  </tr>
                )
              }
              </tbody>
            </table>
            <div className="mt50 mb100">
              <Pagination
                className="ant-pagination"
                defaultCurrent={1}
                current={ResultData.page}
                total={ResultData.pages ? ResultData.pages * 10 : 0}
                onChange={this.pagination}
              />
            </div>
          </div>
          {pushLogPageDialog}
        </div>
      );
    }
  })
);

const mapStateToProps = function (state) {
  return {
    ResultData: state.testResult.resultData,
    ResultList: state.testResult.resultList,
    DetailData: state.testResult.detailData,
    oneDetailInfo: state.testResult.oneDetailInfo
    // saveMsg: state.testCategory.saveMsg,
  };
};

module.exports = connect(mapStateToProps, testResultAction)(TestResult);
// export default TestCategoryList;
